<template>
  <ui-document-title title="登陆">
    <div class="login-container">
      <video class="login-bg" autoplay muted loop>
        <source :src="loginVideo" type="video/mp4">
      </video>
      <h1 class="app-name">{{appName}}</h1>
      <div class="login-box">
        <h3>用户登录</h3>
        <el-form :model="user" :rules="rules" ref="loginForm" @submit.native.prevent="submit" size="large">
          <el-form-item prop="userName">
            <el-input v-model="user.userName" suffix-icon="el-icon-user" placeholder="请输入账号"/>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="user.password" type="password" suffix-icon="el-icon-lock" placeholder="请输入密码"/>
          </el-form-item>
          <el-form-item prop="captchaValue">
            <el-input class="captchInput" placeholder="请输入验证码" v-model="user.captchaValue" :maxlength="4">
              <template v-slot:append v-loading="captchaImageLoading">
                <img class="captchImage" @click="getCaptcha" :src="captchaImage">
              </template>
            </el-input>
          </el-form-item>
          <div class="errors">
            <span v-show="errors"><i class="el-icon-warning"></i> {{ errors }}</span>
          </div>
          <el-form-item>
            <el-button native-type="submit" class="block-button" type="success" :loading="submitting">登&ensp;录</el-button>
          </el-form-item>
        </el-form>
      </div>
      <footer class="copyright">
        ©2024 考勤管理系统毕业设计
        <el-divider direction="vertical"></el-divider>
        <a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow">QQ1208494922</a>
      </footer>
    </div>
  </ui-document-title>
</template>
<script>
  import to from 'await-to-js';
  import LoginVideo from '@/assets/data/login.mp4';

  export default {
    name: 'login',
    data() {
      return {
        appName: process.env.VUE_APP_NAME || '管理系统',
        user: {
          userName: 'zl',
          password: '123',
          captchaCode: '',
          captchaValue: '',
        },
        rules: {
          userName: {
            required: true,
            message: '请输入账号',
          },
          password: {
            required: true,
            message: '请输入密码',
          },
          captchaValue: {
            required: true,
            message: '请输入验证码',
          },
        },
        errors: '',
        submitting: false,
        loginVideo: LoginVideo,
        captchaImage: '',
        captchaImageLoading: false,
      };
    },
    created() {
      this.getCaptcha();
    },
    methods: {
      async submit() {
        const [, valid] = await to(this.$refs.loginForm.validate());
        if (valid === undefined) {
          return;
        }
        this.submitting = true;
        const result = await this.login({...this.user});
        this.submitting = false;
        if (!result.success) {
          this.errors = result.message || '网络错误';
          await this.getCaptcha();
          return;
        }
        console.log(result)
        const {authorization, sysUser} = result.data;
        console.log(sysUser)
        this.$store.commit('userInfo', sysUser);
        this.$store.commit('authorization', authorization);
        await this.$router.push('/loading');

        // this.$store.commit('userInfo', {userName: '系统管理员', code: 'admin', usertype: 0});
        // this.$store.commit('authorization', Date.now());
        // await this.$router.push('/loading');
      },
      async login(params) {
        Object.assign(params, { tenantId: '' })
        this.$store.commit('authorization', '');
        const [, result] = await to(this.$axios.post('/Sys/SysUser/login', null, {params}));
        return result || {success: false};
      },
      async getCaptcha() {
        this.captchaImageLoading = true;
        const [, result] = await to(this.$axios.get('/Sys/SysUser/generatorCode'));
        this.captchaImageLoading = false;
        const data = result || {};
        this.captchaImage = data.base64Image;
        this.user.captchaCode = data.verifyCode;
      },
    },
  };
</script>
<style lang="less" scoped>
  .login-container {
    width: 100%;
    min-width: 1300px;
    min-height: 100%;
    background: #05031E;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 8.75vw 3.33vh;
    position: relative;

    .login-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
    }

    .copyright {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 40px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      color: #ddd;
      font-size: 13px;

      a {
        color: inherit;
      }
    }

    ::v-deep .captchInput {
      .el-input__inner {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      .el-input-group__append {
        width: 140px;
        padding: 0;
        border: none;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.20);
        overflow: hidden;
      }
    }

    .captchImage {
      display: block;
      width: 160px;
      height: 40px;
      cursor: pointer;
    }

    .app-name {
      position: absolute;
      margin: 0;
      bottom: 13vh;
      left: 6.25vw;
      color: #fff;
      font-size: 30px;
      line-height: 36px;
      font-weight: normal;
      letter-spacing: 5px;
      font-family: FashionBlackSimplified, serif;
    }

    .login-box {
      flex: none;
      width: 544px;
      min-height: 455px;
      padding: 0 110px;
      color: #fff;
      border-radius: 5px;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.03));
      box-sizing: border-box;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-width: 6px;
        border-style: solid;
        border-image: url("../assets/img/login-box.svg") 6;
        pointer-events: none;
      }

      > h3 {
        margin: 40px 0 35px;
        text-align: center;
        font-size: 25px;
        line-height: 33px;
        font-weight: normal;
        letter-spacing: 3px;
      }

      .errors {
        margin: 0px 0 5px;
        text-align: center;
        color: #ffa6a6;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-height: 16px;
      }

      ::v-deep .el-form {
        .el-form-item {
          margin-bottom: 32px;
        }

        .el-input__suffix {
          right: 15px;
          color: #fff;
          font-size: 20px;
          text-shadow: 1px 1px 2px #666;
        }

        .el-input--suffix .el-input__inner {
          padding-right: 40px;
        }

        .el-form-item.is-error .el-input__inner {
          border-color: #ffa6a6;
        }

        .el-form-item__error {
          color: #ffa6a6;
        }

        .el-input__inner {
          background-color: rgba(255, 255, 255, 0.37) !important;
          border-radius: 5px;
          border-color: rgba(255, 255, 255, 0.37);
          color: #fff;
          height: 42px;
          line-height: 42px;
        }

        .el-input.is-active .el-input__inner,
        .el-input__inner:focus {
          border-color: #fff;
        }

        .block-button {
          width: 100%;
          border: none;
          margin-top: 10px;
          border-radius: 5px;
          padding: 10px 20px;
          font-size: 28px;
          line-height: 36px;
          background: linear-gradient(to bottom, rgba(136, 236, 247, 0.73) 6.4%, rgba(39, 74, 115, 0.73) 82.6%);
        }
      }
    }
  }

  @font-face {
    font-family: 'FashionBlackSimplified';
    src: url('../assets/fonts/FashionBlackSimplified.woff2') format('woff2'),
    url('../assets/fonts/FashionBlackSimplified.woff') format('woff'),
    url('../assets/fonts/FashionBlackSimplified.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

</style>
